<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      max-height="500"
    >
      <el-table-column prop="time" label="采集时间" width="180">
      </el-table-column>
      <el-table-column prop="name" label="采集人员"> </el-table-column>
      <el-table-column prop="type" label="采集类型"> </el-table-column>
      <el-table-column prop="figure" label="数值"> </el-table-column>
      <el-table-column prop="des" label="详细描述"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const time = require("@/tool/time");
export default {
  data() {
    return {
      tableData: [
        {
          time: "2019-12-24 19:57:36",
          name: "guest",
          type: "天气温度",
          figure: "3",
          des: "9999",
        },
        {
          time: "2019-12-23 18:35:30",
          name: "shangyun",
          type: "燃料消耗",
          figure: "55",
          des: "test",
        },
      ],
      currentPage: 1,
      limit: 10,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$data.limit = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.currentPage = val;
    },
  },
};
</script>

<style scoped>
.block {
  text-align: center;
}
</style>